
<template lang="pug">
el-container.layout-base
  el-aside.layout-aside(width='200px')
    el-header.menu-header(height='60px') 中油测井安全管理系统
    el-menu.layout-menu(background-color="#545c64", text-color="#fff", active-text-color="#ffd04b", :default-active="activeNav", :router="true", :unique-opened="true")
      div(v-for='(nav, idx) in navs', :key='idx')
        el-submenu(v-if='nav.children && nav.children.length > 0', :index='nav.routeName')
          template(slot='title')
            .nav-text-inline
              img(:src="nav.icon", height="16")
              | {{nav.title}}
          el-menu-item(v-for='(child, i) in nav.children', :key='i', :index='child.routeName', :route='{name: child.routeName}') {{child.title}}
        el-menu-item(v-else, :index='nav.routeName', :route='{name: nav.routeName}')
          .nav-text-inline
            img(:src="nav.icon", height="16")
            | {{nav.title}}
  el-container
    el-header.main-header
      span 
      span
        el-dropdown(@command='handleDropCommand')
          span
            font {{this.currentUser ? this.currentUser.username : ''}}
            i.el-icon-arrow-down.el-icon--right
          el-dropdown-menu(slot='dropdown')
            el-dropdown-item(command='handleLogout') 退出
    el-main
      router-view
</template>

<script>
import CurrentUser from '../store/CurrentUser'
// import { reqLogout } from '../services/session'

import NAV_ITEMS from '../navs'

export default {
  data () {
    return {
      navs: NAV_ITEMS
    }
  },
  beforeMount () {
    this.checkUser()
  },
  methods: {
    checkUser () {
      if (!this.currentUser) {
        this.$message.error('请登录')
        this.$router.push({name: 'Login'})
      }
    },
    handleDropCommand (cmd) {
      this[cmd]()
    },
    handleLogout () {
      // const currentUser = CurrentUser.get()
      // console.log(currentUser)
      // reqLogout(currentUser.token).then(() => {
      //   this.$message.succcess('已安全退出')
      // })
      CurrentUser.clear()
      this.$router.push({name: 'Login'})
    }
  },
  computed: {
    activeNav () {
      let navs = this.navs
      let routeName = this.$route.name
      for (let nav of navs) {
        if (nav.children && nav.children.length > 0) {
          for (let child of nav.children) {
            if (child.routes.includes(routeName)) {
              return child.routeName
            }
          }
        } else {
          if (nav.routes.includes(routeName)) {
            return nav.routeName
          }
        }
      }
      return 'Home'
    },
    currentUser () {
      return CurrentUser.get()
    }
  }
}
</script>

<style lang='scss' scoped>
.layout-base {
  background: #F4F4F4;
  height: 100vh;

  .layout-aside {
    width: 200px;
    overflow: hidden;
    background: #545c64;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .menu-header {
      background: #409EFF;
      font-size: 16px;
      padding: 15px;
      line-height: 30px;
      color: #FFFFFF;
      font-weight: bold;
    }

    .layout-menu {
      flex: 1 1;
      border: none;
      overflow-y: auto;

      .nav-text-inline {
        display: flex;
        align-items: center;
        img {
          margin-right: 8px;
          opacity: 0.7;
        }
      }
    }
  }

 

  .main-header {
    background: #FFFFFF;
    padding: 15px;
    line-height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
